<template>
  <el-form
    ref="form"
    class="form-border bold-label"
    label-position="top"
  >
    <el-form-item label="邀请的空间（多选）">
      <select-spaces :spaces.sync="spaces" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit" :loading="loading">发送邀请</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import selectSpaces from '@/components/shared/select-spaces';

export default {
  name: 'invites', // 社区邀请
  components: { selectSpaces },
  data() {
    return {
      spaces: [],
      loading: false,
    };
  },
  computed: {
    communityId() { return this.$route.params.communityId; },
  },
  methods: {
    onSubmit() {
      if (this.spaces.length) {
        this.loading = true;
        this.$api.communities.invite({
          communityId: this.communityId,
          spacesId: this.spaces.map(space => space.id),
        }).then(() => this.$message.success('发送成功'))
          .catch(() => {})
          .then(() => { this.loading = false; });
      }
    },
  },
};
</script>

<style></style>
